<template>
  <div class="cases">
    <Header></Header>

    <div class="search mn">
      <div class="top mn" style="align-items: center">
        <el-input
          v-model="input"
          :prefix-icon="Search"
          placeholder="请输入相应的招标项目名称进行搜索"
          style="font-size: 18px"
        />
        <el-button
          style="
            width: 120px;
            height: 60px;
            background: #1a52ff;
            border-radius: 8px;
          "
          type="primary"
          >搜索
        </el-button>
      </div>
      <div class="category">
        <div class="left">招标分类:</div>
        <div class="right">
          <span
            v-for="(item, index) in 15"
            :class="ClassActive == index ? 'active' : ''"
            @click="GetClassActive(index)"
            >全部分类</span
          >
        </div>
      </div>
      <div class="category">
        <div class="left">事件筛选:</div>
        <div class="right">
          <span
            v-for="(item, index) in 15"
            :class="DateActive == index ? 'active' : ''"
            @click="GetDateActive(index)"
            >全部</span
          >
        </div>
      </div>
    </div>
    <div class="list mn">
      <div v-for="item in 10" class="list-item">
        <div class="tt">济南域潇集团招标采购项目</div>
        <div class="tags">
          <el-tag style="margin-right: 10px">招标分类</el-tag>
          <el-tag type="danger">139万元</el-tag>
        </div>
        <div class="time">2023-07-12</div>
      </div>
    </div>
    <div class="pages">
      <el-pagination :total="1000" background layout="prev, pager, next" />
    </div>
    <Footer></Footer>
  </div>
</template>


<script setup>
/**
 * 组件引入
 */
import { onMounted, reactive, ref } from "vue";
import http from "../../api/api.js";
import msg from "../../utils/Message.js";
import Footer from "../../components/Footer.vue";
import Header from "../../components/Header.vue";

/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */

const input = ref("");

const ClassActive = ref(0);

const DateActive = ref(0);
// 全局数据
var initData = reactive({
  list: [],
});

/**
 * 页面挂载后
 */
onMounted(() => {
  // initPageData();
});

/**
 * 方法区
 */
// 初始化数据
const initPageData = () => {
  http.HttpGet("GetDocumentClassIndex").then((res) => {
    initData.loading = false;
    if (res.code == 0) {
      initData.list = res.data;
      msg.message(res.msg);
    } else {
      msg.message(res.msg, "error");
    }
  });
};

const GetClassActive = (index) => {
  ClassActive.value = index;
};
const GetDateActive = (index) => {
  DateActive.value = index;
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/index.scss";
</style>

